/*
 * @Description: 新增、编辑盒通用表单
 * @Author: Rfan
 * @Date: 2022-10-31 20:44:25
 * @LastEditTime: 2022-10-31 21:12:21
 */

import { useEffect, useState } from 'react';
import { Form, Input, Select } from 'antd';
import { fetchBoxSpecList } from '@/api/box/specifications';

const { Option } = Select;

interface IBoxFormProps {
  visible: boolean;
}

const BoxForm = (props: IBoxFormProps) => {
  const { visible } = props;

  const [boxSpecList, setBoxSpecList] = useState([]);

  useEffect(() => {
    fetchBoxSpecList({}).then((res) => {
      setBoxSpecList(res.data);
    });
  }, [visible]);

  return (
    <>
      <Form.Item name="boxName" label="	盒名称" rules={[{ required: true }]}>
        <Input allowClear />
      </Form.Item>
      <Form.Item name="boxCode" label="盒编码" rules={[{ required: true }]}>
        <Input allowClear />
      </Form.Item>
      <Form.Item name="archiveBoxSpecId" label="档案盒规格" rules={[{ required: true }]}>
        <Select>
          {boxSpecList.map((item) => (
            <Option key={item.id} value={item.id}>
              {item.name}
            </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item name="boxSerialNumber" label="盒序号" rules={[{ required: true }]}>
        <Input allowClear />
      </Form.Item>
      <Form.Item name="fileCount" label="盒内文件份数" rules={[{ required: true }]}>
        <Input allowClear />
      </Form.Item>
      <Form.Item name="filePageCount" label="盒内文件页数" rules={[{ required: true }]}>
        <Input allowClear />
      </Form.Item>
      <Form.Item name="remark" label="备注">
        <Input.TextArea placeholder="备注信息描述，最多可填写2000字" maxLength={2000} showCount />
      </Form.Item>
    </>
  );
};

export default BoxForm;
